<template>
	<view class="notice-layout">
		<view class="notice-title">
			{{ noticeDetail?.title }}<view v-show="noticeDetail.status" class="tag">置顶</view>
		</view>
		<view class="author">
			<view class="name">{{ noticeDetail?.author }}</view>
			<uni-dateformat :date="noticeDetail?.publish_date" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
		</view>
		<view class="content" v-html="noticeDetail?.content">
			
		</view>
		<view class="read">
			<view class="text">阅读</view>
			<view class="number">{{ noticeDetail.view_count }}</view>
		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { reqNoticeDetail } from '@/apis/notice.js'
	import { ref } from 'vue'
	
	let noticeDetail = ref({})
	
	onLoad(async ({id}) => {
		const {data} = await reqNoticeDetail({ id })
		noticeDetail.value = data
	})
</script>

<style lang="scss" scoped>
	.notice-layout {
		padding: 30rpx;

		// 标题
		.notice-title {
			font-size: 44rpx;
			line-height: 1.4em;
			display: inline-block;

			.tag {
				display: inline-block;
				font-size: 23rpx;
				border: 1px solid indianred;
				height: 40rpx;
				line-height: 40rpx;
				border-radius: 4rpx;
				padding: 0 10rpx;
				color: indianred;
				margin-left: 10rpx;
			}
		}

		.author {
			margin: 20rpx 0;
			color: $text-font-color-3;
			display: flex;

			.name {
				margin-right: 30rpx;
			}
		}

		.content {
			margin-bottom: 40rpx;
			color: $text-font-color-2;
			line-height: 50rpx;
			text-indent: 2rem;
		}

		.read {
			display: flex;
			color: $text-font-color-3;

			.text {
				margin-right: 10rpx;
			}
		}
	}
</style>